<template>
  <div class="header-block-wrapper">
    <div class="slogon-search">
      <div class="slogon">
        <span>政策精准匹配</span>
      </div>
    </div>

    <div class="search-box">
      <div class="input-menu">
        <!-- <el-input v-model="searchKey" placeholder="输入您的企业名称，支持模糊搜索，例如：园查查；"/> -->

        <el-autocomplete
          v-model="searchKey"
          :fetch-suggestions="querySearch"
          placeholder="输入您的企业名称，支持模糊搜索，例如：园查查；"
          :trigger-on-focus="false"
          @select="handleSelect"
        >
          <template slot-scope="{ item }">
            <div class="flex justify-between items-center">
              <div class="name">{{ item.value }}</div>
              <span class="text-gray-300">{{ item.legalPersonName }}</span>
            </div>
          </template>
        </el-autocomplete>
      </div>
      <div class="btn">
        <el-button type="primary" :loading="loading" @click="handleSearch">智能匹配</el-button>
      </div>
    </div>

    <div class="hot-keys">热门关键词：立即申报 创新转型 补贴政策 扶持政策</div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getCpyListByName, getPolicyByCpyInfo } from '@/api/policy'
import { MutationsType } from '@/actions/policy'
export default Vue.extend({
  components: {},
  data() {
    return {
      loading: false,
      searchKey: '',
    }
  },
  beforeDestroy() {
    this.$store.commit(MutationsType.SET_FETCHING_DATA, false)
  },
  methods: {
    async handleSearch() {
      const { searchKey } = this
      if (!searchKey) return
      this.$emit('onSearchClick', { list: [] })
      this.loading = true
      this.$store.commit(MutationsType.SET_FETCHING_DATA, true)
      const res = await getPolicyByCpyInfo({
        name: searchKey,
        industries: '新能源汽车',
      })

      this.loading = false
      this.$emit('onSearchClick', res)
    },
    async querySearch(queryString, cb) {
      const str = queryString.trim()
      if (!str) {
        cb()
      } else {
        const res = await getCpyListByName(queryString.trim())
        const list = res.list?.map((d) => ({
          value: d.name,
          legalPersonName: d.legalPersonName,
        }))
        cb(list)
      }
    },
    handleSelect(item) {
      console.log('%c [ item ]-45', 'font-size:13px; background:pink; color:#bf2c9f;', item)
    },
  },
})
</script>
<style lang="scss" scoped>
.header-block-wrapper {
  background-image: url(@/assets/img/policy/banner.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 360px;

  .slogon-search {
    padding-top: 80px;
    margin-bottom: 40px;
  }

  .slogon {
    font-size: 36px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .point {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 50%;
    }
  }

  .search-box {
    width: 710px;
    margin: 0 auto;
    display: flex;

    .input-menu {
      display: flex;
      position: relative;

      ::v-deep.el-input__inner {
        height: 55px;
        width: 690px;
        border-radius: 4px 0 0 4px;
      }
    }

    .btn {
      ::v-deep.el-button {
        width: 120px;
        height: 55px;
        border-radius: 0 4px 4px 0;
        border: none;
        background-color: #fa6400;
      }
    }
  }

  .hot-keys {
    color: #fff;
    width: 710px;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 14px;
  }
}
</style>
